<template>
  <div class="parent">
    <sub-comp title="心动">
      <template #game-list="params">
        <ul>
          <li v-for="game of params.games">
            {{ game }}
          </li>
        </ul>
      </template>
    </sub-comp>
    <sub-comp title="心动网络">
      <template v-slot:game-list="params">
        <ol>
          <li v-for="game of params.games">{{ game }}</li>
        </ol>
      </template>
      <template #city>
        <footer>位于上海静安区</footer>
      </template>
    </sub-comp>
    <sub-comp title="心动XX">
      <template #game-list="{ games }">
        <h4 v-for="game of games">{{ game }}</h4>
      </template>
      <template #city>
        <footer style="color: gray; font-size: 0.5em; text-align: center">
          上海静安区
        </footer>
      </template>
    </sub-comp>
  </div>
</template>

<script setup lang="ts">
import SubComp from "./SubComp.vue";
</script>

<style scoped>
@import "../common.css";

.parent {
  display: flex;
  justify-content: space-between;
}
.parent > * {
  width: 300px;
  height: 400px;
}
</style>
